<script lang="ts" setup>
import {onMounted, ref} from "vue";
import Tab from "@/components/Tab.vue" 

let datalist = <any>ref([])
const fillData = {
   img:'',
   title:'Vue & Vite：现状与未来 ',
   author:"cc"
}
datalist.value = Array(20).fill(fillData)

const tabs = ref()
tabs.value = [
      {title:'作品 0',active:true},
      {title:'喜欢',active:false,suffix:"lock"},
      {title:'收藏',active:false,suffix:"lock"},
      {title:'观看历史',active:false}
]
let beforeScrollTop:any = 0
let top:any = 0
onMounted(()=>{

      const dom = document.getElementById('scroll-wrap')
      top = document.getElementById('bg_cover')?.offsetTop
      beforeScrollTop = dom?.scrollTop;
      dom?.addEventListener('scroll',function(e:any){
            const bg:any = document.getElementById('bg_cover')
            let afterScrollTop = e.target.scrollTop;
            let delta = afterScrollTop - beforeScrollTop;
            if(delta<300)bg.style.top = (top - delta)+'px'
      })
})

</script>

<template>
      <div style="height: 100vh; width: 100vw;position: fixed;top: 0;background: white;z-index: -1;left: -120px;"> </div>
      <div id="bg_cover"></div>
      <div id="scroll-wrap" style="display: flex; justify-content: center; overflow-y: scroll;height: 100%;padding: 0 60px;">

            <div class="user-detail">
                  <div style="display: flex; align-items: center; margin: 28px 0 21px;position: relative;height: 120px;">
                        <div style="margin-right: 2rem;;">
                              <img src="@/assets/avatar.png" alt="" style="width: 7.125rem;height: 7.125rem;;">
                        </div>
                        <div style="flex-grow:1">
                              <div>
                                    <span style="font-size: 1.25rem;font-weight: 500;line-height: 1.75rem;    font-family: PingFang SC,DFPKingGothicGB-Medium,sans-serif;">🌈🌈🌈测试</span>
                              </div>
                              <div class="user-info-2" style="display: flex; flex-direction: row;">
                                    <div>
                                          <span class="wk">关注</span>
                                          <span class="qs"> 2 </span>
                                    </div> 
                                    <div>
                                          <span class="wk">粉丝</span> 
                                          <span class="qs">1</span>
                                    </div> 
                                    <div>
                                          <span class="wk">获赞</span>
                                          <span class="qs"> 0 </span>
                                    </div> 
                              </div>
                              <p style="margin-top: 0.75rem;font-size: 0.75rem;color: var(--color-text-t3);"> 抖音号：8888888888 </p>

                        </div>
                        <div class="btns" style="position: absolute;bottom: 0; right: 0;">
                              <button>编辑资料</button>
                        </div>
                  </div>
                  <div>
                       <div style="margin: 11px 0; border-bottom: 1px solid var(--color-line-l3);position: sticky;top: 0px; background-color:var(--color-bg-b0);">
                              <Tab :tabs="tabs"/>
                        </div>
                       <div style="min-height: 100rem; width: 100%; display: flex;align-items: center;flex-direction: column;">
                              <div class="empty" > </div>
                              <div style="font-weight: 500; margin: 1rem 0;font-size: 1.25rem;">暂无内容</div>
                       </div>
                       
                  </div>
            </div>
      </div>
      

      
</template>
<style>
      #bg_cover{
            height: 400px; width: 100%;background-image: url(@/assets/bg_personal_light.png); position: absolute;top:calc(0rem - var(--header-height));z-index: -1;background-size:100% 150%;
      }
</style>
<style scoped>
.empty{ margin-top: 40px; width: 236px;height: 158px;background-image:url(@/assets/empty_search.png); background-size: contain; background-repeat: no-repeat;}
.user-detail .btns button{ border: none;font-size:0.875rem;background: var(--color-bg-b3) ; min-width: 5.5rem;height: 2.25rem;border-radius: 0.5rem;; line-height: 22px;}
.user-detail{width: 100%;max-width: 1208px; display: flex;flex-direction: column; }
.user-info-2{
      width: 100%;
}
.user-info-2 div{ 
}
.user-info-2 .wk{
    color: var(--color-text-t3);
    margin-right: 6px;
    font-size: 14px;
    line-height: 22px;
}

.user-info-2 .qs{
    color: var(--color-text-t1);
    font-size: 16px;
    line-height: 24px;
}
.user-info-2 div:not(:last-of-type):after {
    content: "";
    width: 0;
    height: 16px;
    border-left: 1px solid #f2f2f4;
    /* border-left: 1px solid var(--color-secondary-default); */
    margin: 0 16px;
}

</style>

